<template>
	<view class="content" style="margin: 0 auto ;">
		<view class="time_content">
			<view class="timeyy_dd">
				<text>{{ time_yy_dd }}</text>
			</view>
			<view class="timeweek">
				<text>{{ timeWeek }}</text>
			</view>
			<view class="timenow">
				<text>{{ time_hh_mm_ss  }}</text>
			</view>
		</view>
		<view class="title">
			<image class="sunImg" :src="sunSrc"></image>
			<text class="titleofWork">上班打卡</text>
			<text class="dk_time">打卡时间:{{ dk_time }}</text>
			<image class="img_dk" :src="qdType"></image>
		</view>
		<view class="img_content">
			<image class="logo" :src="imageSrc" @click="qd_click"></image> 
		</view>
	</view>
</template>

<script>
	import {
		getUserProfile
	} from "@/api/system/user";
	import {
		qd,
		qdcheck
	} from "@/api/qd/qd.js";
	export default {
		data() { 
			return {
				imageSrc: '/static/images/qd.png',
				dk_msg: '未签到',
				time_yy_dd: '',
				timeWeek: '',
				time_hh_mm_ss: '',
				sunSrc:'/static/images/sung.png', 
				qdType:'/static/images/dk/wdk.png',
				dk_time:'未打卡'
			};
		},
		mounted() {
			this.updateTime();
			setInterval(this.updateTime,1000); 
			getUserProfile().then(res => {
				qdcheck(res.data.userId).then(res_n => { 
					console.log(res_n.msg)
					if (res_n.msg == 0) {
						this.imageSrc = '/static/images/qd.png'
						dk_msg: '未签到'
						// 处理未签到的情况 
					} else {
						console.log(res_n)
						const Timeofdk = new Date(res_n.data.createTime)
						const hours = Timeofdk.getHours().toString().padStart(2, '0');
						const minutes = Timeofdk.getMinutes().toString().padStart(2, '0');
						const seconds = Timeofdk.getSeconds().toString().padStart(2, '0');
						this.dk_time= `${hours}:${minutes}:${seconds}`
						if(res_n.data.type == 1){
							this.qdType = '/static/images/dk/zcdk.png'
						}else if(res_n.data.type == 2){
							this.qdType = '/static/images/dk/cddk.png' 
						}else if(res_n.data.type == 3){
							this.qdType = '/static/images/dk/kgdk.png'
						}
						this.imageSrc = '/static/images/yqd.png';
						this.dk_msg = '已签到'
					}
				});
			});
		},
		methods: {
			qd_click() {
				if (this.imageSrc === '/static/images/qd.png') {
					getUserProfile().then(res => {
						console.log(res);
						console.log(res.data.userId);
						qd(res.data.userId).then(res_n => {
							this.imageSrc = '/static/images/yqd.png';
							this.dk_msg = '已签到'
							qdcheck(res.data.userId).then(res_n => {
								console.log(res_n.msg)
								if (res_n.msg == 0) {
									this.imageSrc = '/static/images/qd.png'
									dk_msg: '未签到'
									// 处理未签到的情况   
								} else {
									console.log(res_n)
									const Timeofdk = new Date(res_n.data.createTime)
									const hours = Timeofdk.getHours().toString().padStart(2, '0');
									const minutes = Timeofdk.getMinutes().toString().padStart(2, '0');
									const seconds = Timeofdk.getSeconds().toString().padStart(2, '0');
									this.dk_time= `${hours}:${minutes}:${seconds}`
									if(res_n.data.type == 1){
										this.qdType = '/static/images/dk/zcdk.png'
									}else if(res_n.data.type == 2){
										this.qdType = '/static/images/dk/cddk.png' 
									}else if(res_n.data.type == 3){
										this.qdType = '/static/images/dk/kgdk.png'
									}
									this.imageSrc = '/static/images/yqd.png';
									this.dk_msg = '已签到'
								}
							});
						});
					});
				}
			},
			updateTime() {
				const now = new Date();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
				const weekDay = weekDays[now.getDay()];
				this.time_yy_dd = `${month}月${day}日`;
				this.timeWeek = `星期${weekDay}`;
				this.time_hh_mm_ss = `${hours}:${minutes}:${seconds}`;
			}
		}
	};
</script>

<style>
	.container {
		text-align: center;
		/* 水平居中 */
		height: 100vh;
		/* 使容器占满整个视口高度 */
	}

	.title {
		margin-top: 8vh;
		text-align: center;
		/* 水平居中 */
		height: 13vh;
		position: relative;
		
		/* 使容器占满整个视口高度 */
	}


	.qd {
		display: flex;
		justify-content: center;
		/* 水平居中 */
	}

	.time_content {
		margin-top: 10vh;
		height: 13vh;
		position: relative
	}
	.timeyy_dd {
		position: absolute;
		width: 40vw;
		top: 10vh;
		left: 50px;
	}
	.timeyy_dd text{
		font-size: 13px;
	}
	.timeweek {
		position: absolute;
		width: 40vw;
		top: 13vh;
		left: 50px;
	}
	.timeweek text{
		font-size: 13px;
	}
	.timenow {
		position: absolute;
		width: 40vw;
		top: 10vh;
		right: 50px;
	}
	.timenow text{
		font-size: 30px;
		font-weight: bolder;
	}
	.img_content {
		position: relative;
		height: 50vh;
	}
	.img_content image{
		left:10vw;
		bottom: 0vh;
		position: absolute;
		height: 60vw;
		width: 60vw;
		border-radius: 80%;
		border: #f59a23 solid 2vw;
		margin-left: 10%;
		background-color:  #f59a23;
	}
	.sunImg {
		width: 40px;
		height: 40px;
		position: absolute;
		left: 15vw;
	}
	.titleofWork {
		position: absolute;
		left: 30vw;
		top:10px;
	}
	.img_dk{
		position: absolute;
		right: 65px;
		width: 50px;
		height: 50px;
	}
	.dk_time {
		position: absolute;
		left: 18vw;
		bottom: 1vh;
	}
</style>
